<template>
  <table class="show-list mt-10">
    <thead>
      <th class="index"></th>
      <th class="songName">歌曲</th>
      <th class="singer">歌手</th>
      <th class="time">时长</th>
    </thead>
    <tbody>
      <tr
        v-for="(item, index) in Data"
        :key="item.id"
        @mouseenter="handleShow(index)"
        @mouseleave="handleHide"
        :class="(index + 1) % 2 === 0 ? 'isEven' : 'isOdd'"
      >
        <td class="show-index" :class="index < 3 ? 'isRed' : ''">
          <span>{{ index + 1 }}</span>
        </td>
        <td class="show-song">
          <div class="show-song-left">
            <img :src="item.picUrl" />
            <span>{{ item.name }}</span>
            <span class="alia">{{ item.alia[0] }}</span>
            <span class="span-warp" v-if="item.fee !== 0">VIP</span>
            <span class="span-warp" v-if="item.mv">MV</span>
          </div>
          <div class="show-song-right" v-if="isShow === index">
            <span class="iconfont icon-bofang"></span>
            <span class="iconfont icon-tianjia"></span>
            <span class="iconfont icon-fenxiang"></span>
          </div>
        </td>
        <td class="songs-author">
          {{ item.author.map((item) => item.name).join("/") }}
        </td>
        <td>{{ processingTime(item.time) }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "RankingTable",
};
</script>

<script setup>
import { getRankingList } from "@/api/ranking/index.js";
import { watch, ref, onMounted } from "vue";
import { useRankingStore } from "@/store/modules/ranking.js";
const rankingStore = useRankingStore();
const Data = ref([]);
const isShow = ref(-1);
onMounted(() => {
  if (rankingStore.id) {
    getRankContent(rankingStore.id, 20);
  } else {
    Data.value = [];
  }
});
watch(
  () => rankingStore.id,
  () => {
    if (rankingStore.id) {
      getRankContent(rankingStore.id, 20);
    }
  }
);

// 获取榜单内容
const getRankContent = async (id, limit) => {
  const res = await getRankingList(id, limit);
  Data.value = res.songs.map((item) => {
    return {
      name: item.name,
      picUrl: item.al.picUrl,
      author: item.ar,
      time: item.dt,
      fee: item.fee,
      alia: item.alia,
      mv: item.mv,
      id: item.id,
    };
  });
  rankingStore.$patch({
    Data: Data.value,
  });
};
// 处理时间的函数

const processingTime = (time) => {
  let m = Math.floor(time / 1000 / 60);
  let s = Math.ceil((time / 1000) % 60);
  if (m < 10) {
    m = "0" + m;
  }
  if (s < 10) {
    s = "0" + s;
  }
  return m + ":" + s;
};

// 移入事件
const handleShow = (index) => {
  isShow.value = index;
};
// 移出事件
const handleHide = () => {
  isShow.value = -1;
};
</script>

<style scoped lang="less">
.show-list {
  // border: 1px solid red;
  width: 100%;
  thead {
    font-weight: 400;
    color: #999;
    height: 50px;
    font-size: 14px;
    background-color: #fafafa;
    .index {
      width: 10%;
    }
    .songName {
      width: 60%;
      text-align: left;
    }
    .singer {
      width: 150px;
      text-align: left;
    }
    .time {
      width: 15%;
      text-align: left;
    }
  }
  tbody {
    tr {
      line-height: 80px;
      .show-index {
        span {
          padding: 0 10px;
          font-size: 24px;
          line-height: 80px;
        }
      }
      .isRed {
        color: #fd6a22;
      }
      .show-song {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .show-song-left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 50px;
            padding-right: 15px;
          }
          span {
            // display: inline-block;
            max-width: 150px;
            padding-right: 8px;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .alia {
            color: #999;
            font-size: 12px;
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .span-warp {
            display: inline-block;
            width: 30px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            border: 1px solid #4ac98c;
            border-radius: 5px;
            margin-right: 8px;
            padding: 0;
          }
        }
        .show-song-right {
          height: 80px;
          span {
            display: inline-block;
            font-size: 26px;
            padding-right: 10px;
            color: #d0d0d0;

            &:hover {
              color: #45c788;
            }
          }
        }
      }
      .songs-author {
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 10px;
        box-sizing: border-box;
      }
    }
    .isEven {
      background-color: #fafafa;
    }
    .isOdd {
      background-color: #f7f7f7;
    }
  }
}
</style>
